<template>
  <div id="OtherCity">
    <!-- 一、上半部分 -->
    <div class="text0">
      <div class="tip">
        你正在预览{{ city }}的天气信息，可以通过右上角"+"号按钮保存起来。
      </div>

      <!-- 今日天气 -->
      <div class="today">
        <h3>当日气温是：{{ tem }}摄氏度</h3>
        <h3>当日天气是：{{ climate }}</h3>
        <h3>当日风向是：{{ windDir }}风</h3>
        <h3>当日风力是：{{ windPow }}级</h3>
      </div>
    </div>

    <!-- 二、下半部分（图表） -->
    <div class="chart">
        <div class="weatherForecast">
                <!-- 文字部分 -->
                <div class="text">
                    <div class="days" v-for="item in dates" :key="item.id">
                        <span>{{item.week}}</span>
                        <span>{{item.date}}</span>
                        <span>{{item.dayweather}}</span>
                        <span>风力{{item.daypower}}级</span>                  
                    </div>
                </div>

                <!-- 图表部分 -->
                <div id="linegraph" style="width:100%;height:160px"></div>
        </div>
    </div>
  </div>
</template>

<script>
const axios = require('axios');
import * as echarts from "echarts";

export default {
  name: 'OtherCity',
  data() {
    return {
      /* 传过来的参数 */
      city: '',
      code: '',

      obj:[], /* 由对象组成的数组 */
      tem: '',
      climate: '',
      windDir: '',
      windPow: '',

      dates: [],
      xData: [],
      yDaytemp: [],
      yNighttemp: [],
      isPlus:true,
    }
  },
  mounted() { 
    this.initStyle(),
    this.getCityName(),
    this.checkCity(),
    this.othercityTem()
  },
  methods: {
    /* 点击查看某个城市后 */
    checkCity(){
      if(this.$store.state.checkCityName != ''){
        this.city = this.$store.state.checkCityName
        this.$store.state.checkCityName = ''
      }
      if(this.$store.state.checkCityCode != ''){
        this.code = this.$store.state.checkCityCode
        console.log('ggg',this.code);
        this.$store.state.checkCityCode = ''
      }
    },

    /* 添加上'+'小图标 */
    initStyle(){
        this.$store.commit('toggleShow',this.isPlus)
    },

    /* 接受数据 & 传送数据 */
    getCityName() {
      this.city = this.$store.state.message
      this.$store.state.message = ''
      this.code = this.$store.state.citycode
      this.$store.state.citycode = ''

      this.$store.commit('sendCity',this.city)
      this.$store.commit('sendCode',this.code)
    },

    /* 通过adcode调取天气信息 */
    async othercityTem() {
      const res = await axios.get(
        `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.code}&extensions=all&key=76dd8c6deab6cb7638ee9a9e77ae197d`
      )
      
      this.dates = res.data.forecasts[0].casts
      console.log(this.dates);
      for(let i = 0; i<this.dates.length;i++){
        this.obj[i] = {}
        this.obj[i] = this.dates[i]
        const str = this.dates[i].date
        this.dates[i].date = str.substring(5,10)
        const week = this.dates[i].week
        switch(week){
            case '1':
                this.dates[i].week = '周一';
                break;
            case '2':
                this.dates[i].week = '周二';
                break;
            case '3':
                this.dates[i].week = '周三';
                break;
            case '4':
                this.dates[i].week = '周四';
                break;
            case '5':
                this.dates[i].week = '周五';
                break;
            case '6':
                this.dates[i].week = '周六';
                break;
            case '7':
                this.dates[i].week = '周日';
                break;
        }
        /* 图表取值 */
        this.yDaytemp[i] = this.obj[i].daytemp-0  /* 为了变成数字类型 */
        this.yNighttemp[i] = this.obj[i].nighttemp-0
      }
      
      this.tem = this.obj[0].daytemp
      this.climate= this.obj[0].dayweather
      this.windDir = this.obj[0].daywind
      this.windPow = this.obj[0].daypower

        //样式调整
      this.dates[0].week = '今天'
      this.dates[1].week = '明天'

      //echarts实例
      let temChart = echarts.init(document.getElementById('linegraph'))
      //图表设置
      let option= {
        xAxis: {
            scale:true,
            show:false,
            data: [],
        },
        yAxis: {
            type:'value',
            show:false,            
        },
        series: [
            {
            data: this.yDaytemp,
            type: 'line',
            label:{
                show:true,
                formatter:'白{c}℃',
                fontSize:12,
                color:'#fff'
                }
            },
            {
            data: this.yNighttemp,
            type: 'line',
            label:{
                show:true,
                formatter:'晚{c}℃',
                position:'bottom',
                fontSize:12,
                color:'#fff'
                }          
            }
        ]
      }
      temChart.setOption(option)
    },
  },
}
</script>

<style scoped>
#OtherCity .text0 {
  width: 100%;
  color: #fff;
}
.text0 .tip {
  font-size: 16px;
  text-align: center;
  background-color: rgb(0, 78, 113);
  padding: 15px 0;
}
.text0 .today {
    width: 100%;
    background-color: rgba(0,102,138,1);
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.text0 .today h3{
    text-align: center;
    padding: 15px 0;
}
#OtherCity .chart{
    background-color: rgba(0,102,138,1);
    display: flex;
}

#OtherCity .chart .weatherForecast{
    width: 720px;
    background-color: rgb(0,78,113);  
    margin: 10px auto;
    border-radius: 10px;
    color: #fff;
    
}
.weatherForecast .text{
    display: flex;
    padding: 25px 70px 0 70px;
}
.weatherForecast .text .days{
    flex: 1 ;
    flex-direction: column;
}
.weatherForecast .text .days span{
    display: block;
    text-align: center;
    margin: 25px 0;
}
</style>
